<template>
  <section class="featured-projects section">
    <div class="container">
      <h2 class="section-title">
        精选项目
      </h2>
      
      <div class="featured-projects__grid">
        <div
          v-for="project in featuredProjects"
          :key="project.id"
          class="featured-projects__item"
        >
          <ProjectCard :project="project" />
        </div>
      </div>
      
      <div class="featured-projects__more">
        <ElButton type="primary" size="large" @click="$router.push('/projects')">
          查看更多项目
          <ElIcon><ArrowRight /></ElIcon>
        </ElButton>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import { useProjectsStore } from '@/stores/projects'
import ProjectCard from './ProjectCard.vue'

const projectsStore = useProjectsStore()
const { featuredProjects } = storeToRefs(projectsStore)
</script>

<style lang="scss" scoped>
.featured-projects {
  &__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-xl;
    margin-bottom: $spacing-2xl;
    
    @include respond-to('md') {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @include respond-to('lg') {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  &__more {
    text-align: center;
  }
}
</style>

